<!--  -->
<template>
  <div class="pickshowcontainer">
    <img src="../assets/images/special.gif" class="specailimg" v-if="ifspecial">
    <img src="../assets/images/yc.png" class="ycimg" v-if="ifspecial">
    <img src="../assets/images/mb_left.png" class="mb mb_left" v-if="ifspecial">
    <img src="../assets/images/mb_right.png" class="mb mb_right" v-if="ifspecial">
    <img src="../assets/images/jgd.png" class="jgd" v-if="ifspecial">
    <img src="../assets/images/jgd_left.png" class="jgd jgd_left" v-if="ifspecial">
    <div class="share" :style="{'display':ifusershare?'block':'none'}" @click="ifusershare=false">
      <img src="../assets/images/share.png" class="sharepic">
    </div>
    <picload :src="require('../assets/images/card'+chooseid+'.jpg')"
      :eatfoodsrc="require('../assets/images/food'+chooseid+'.png')"></picload>
    <div class="button_set">
      <el-button class="button_style" @click="continue_fun">继续抽卡</el-button>
      <el-button class="button_style" @click="mylegend" icon="el-icon-notebook-1">我的图鉴</el-button>
      <!-- <el-button class="button_style" @click="ifusershare = !ifusershare">请朋友抽盲盒</el-button> -->
    </div>
    <div class="star">
      <stars :starNumber="40" :w="20" :h="20"></stars>

    </div>
    <div class="meteor meteor1">
      <meteor :delay="0" :w="3" :h="200" :rotateDeg="40"></meteor>
    </div>
    <div class="meteor meteor2">
      <meteor :delay="2" :w="2" :h="100" :rotateDeg="40"></meteor>

    </div>
  </div>
</template>

<script>
  import picload from "../components/picload.vue"
  import Stars from "../components/Stars.vue"
  import meteor from "../components/meteor.vue"
  export default {
    data() {
      return {
        chooseid: 0,
        ifusershare: false,
        ifspecial: false
      };
    },

    components: {
      picload,
      Stars,
      meteor
    },
    created() {
      this.chooseid = this.$route.query.chooseid
      this.specialarray = this.$store.state.specialarray
      console.log(this.specialarray)
      if (this.specialarray.indexOf(Number(this.chooseid)) != -1) {
        setTimeout(() => {
          this.ifspecial = true
        }, 3000);
      }
    },
    computed: {},


    methods: {
      continue_fun() {
        var base_URL = this.$store.state.base_URL
        this.$router.push({
          path: '/gacha/',
          query: {
            ifstart: 0
          }
        });
      },
      mylegend() {
        var base_URL = this.$store.state.base_URL
        this.$router.push({
          path: base_URL + '/result',
          query: {}
        });
      },



    }
  }
</script>
<style scoped lang="less">
  .pickshowcontainer {
    width: 100%;
    height: 100%;
    background: url('../assets/images/cardbg.png');
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;

    .specailimg {
      position: absolute;
      top: 0;
      right: -90px;
      z-index: 3;
      transform: rotate(30deg);
      // animation: specialframe 0.5s forwards;
      // animation-delay: 3s;
      width: 300px;
      height: 200px;
    }

    .ycimg {
      position: absolute;
      top: 180px;
      right: 30px;
      z-index: 3;
      width: 100px;
      animation: specialframe 0.5s forwards;
    }

    .jgd,
    .jgd_left {
      position: absolute;
      right: 0;
      z-index: 2;
      width: 100%;
      height: 80%;
      animation: jgd_move 8s linear forwards infinite alternate;
      transform-origin: right top;
    }

    .jgd_left {
      left: 0;
      transform-origin: left top;
      animation: jgd_move_left 8s linear forwards infinite alternate;
    }

    @keyframes jgd_move_left {
      0% {
        transform: rotate(-30deg);
      }

      25% {
        transform: rotate(30deg);
      }

      50% {
        transform: rotate(-30deg);
      }

      100% {
        transform: rotate(30deg);
      }
    }

    @keyframes jgd_move {
      0% {
        transform: rotate(30deg);
      }

      25% {
        transform: rotate(-30deg);
      }

      50% {
        transform: rotate(30deg);
      }

      100% {
        transform: rotate(-30deg);
      }
    }

    .mb {
      position: absolute;
      height: 100%;
      top: 0;
      animation: mb_move 4s forwards;
      z-index: 2;
    }

    .mb_left {
      left: 0;
    }

    .mb_right {
      right: 0;
    }

    @keyframes mb_move {
      0% {
        width: 70%;
        opacity: 1;
      }

      99% {
        width: 30%;
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes specialframe {
      0% {
        opacity: 0.3;
        width: 100px;
      }

      100% {
        opacity: 1;
        width: 25px;
      }
    }

    .star {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .meteor {
      position: absolute;
    }

    .meteor1 {
      top: 10%;
      left: 30%;
    }

    .meteor2 {
      top: 30%;
      left: 60%;
    }

    .share {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 4;

      .sharepic {
        position: absolute;
        right: 0;
        width: 200px;
      }
    }
  }

  .button_set {
    position: absolute;
    width: 100%;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    animation: button_appear 1s forwards;
    animation-delay: 3s;
    opacity: 0;
    z-index: 2;
  }

  @keyframes button_appear {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .button_style {
    background: RGB(95, 116, 147);
    color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
</style>